.body {
  // position: absolute;
  // top: 0;
  // left: 0;
  // width: 100%;
  // height: 100%;
  width: 1920px;
  height: 1080px;
  background-color: rgba(13, 42, 67, 0);
  transform-origin: left top;
  background-size: 100%;
  color: #48eaf0;
  font-size: 16px;
}

.videoBg {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 0;
  z-index: -1;
}

.header {
  width: 1920px;
  height: 80px;
  transform: translate(0px, 0px);
}

.title {
  font-size: 40px;
  color: #fff;
  font-weight: 800;
  height: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.layout {
  position: absolute;
  top: 0;
  left: 0;
}

.toolBar {
  transform: translate(1642px, 36px);
  display: flex;
  z-index: 10;
}

.toolItem {
  width: 104px;
  height: 49px;
  line-height: 49px;
  background-image: url(~@/assets/btn-bg.png);
  background-size: cover;
  margin-right: 30px;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}

.toolItem img {
  width: 10px;
  height: 6px;
}

.toolBar .select {
  width: 110px;
  opacity: 0;
  position: absolute;
  left: 0;
  top: 5px;
}

.countContainer {
  width: 780px;
  padding: 0px 120px;
  transform: translate(572px, 123px);
  display: flex;
  justify-content: space-around;
}

.mapContainer {
  width: 780px;
  height: 673px;
  transform: translate(572px, 259px);
}

.left {
  transform: translate(40px, 106px);
}

.right {
  transform: translate(1466px, 104px);
}

.countItem {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.countTitle {
  color: #5badc2;
  font-size: 24px;
  font-weight: 500;
  height: 36px;
}

.countNum {
  color: #fff;
  font-size: 40px;
  font-family: 'SF Pro Display Heavy Italic';
  line-height: 32px;
  margin-top: 8px;
}

.countBg {
  width: 86px;
  height: 45px;
  margin-top: -19px;
}

.mapTitle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mapTitleImg {
  width: 59px;
  height: 5px;
}

.mapTitleLable {
  padding: 0 11px;
}

.leftCard {
  width: 414px;
  height: 457px;
  margin-bottom: 20px;
  background-image: url(~@/assets/group1-left.png);
  background-size: cover;
  position: relative;
}

.leftCard.lg {
  height: 929px;
  background-image: url(~@/assets/group2-left.png);
}

.cardTitle {
  letter-spacing: 10px;
  font-size: 30px;
  font-weight: 500;
  padding-top: 15px;
  padding-left: 24px;
}

.cardSubTitle {
  font-size: 20px;
  padding-top: 8px;
  padding-left: 24px;
}

.rightCard {
  width: 414px;
  height: 457px;
  margin-bottom: 20px;
  background-image: url(~@/assets/group1-right.png);
  background-size: cover;
  position: relative;
}

.rightCard.lg {
  height: 929px;
  background-image: url(~@/assets/group2-right.png);
}

.rightCard .cardTitle {
  padding-right: 14px;
  text-align: right;
}

.rightCard .cardSubTitle {
  padding-right: 24px;
  text-align: right;
}

.tabBar {
  transform: translate(707px, 957px);
  width: 515px;
  height: 79px;
  background-size: cover;
  background-image: url(~@/assets/tab1.png);
  display: flex;
  justify-content: space-around;
  align-items: center;
  // background: linear-gradient(
  //   180deg,
  //   rgba(226, 240, 246, 0) 0%,
  //   rgba(56, 176, 209, 0.26) 100%
  // );
  // border: 0.78px solid rgba(61, 180, 222, 1);
  // border-radius: 100px;
}

.tabBar.tab2 {
  background-image: url(~@/assets/tab2.png);
}

.tabItem {
  color: rgba(69, 233, 255, 0.58);
  font-size: 24px;
  font-weight: 500;
  padding: 20px 60px;
}

.active {
  color: rgba(69, 233, 255, 0.85);
}

.welcome {
  height: 100%;
  width: 1233px;
  transform: translate(344px, 0px);
}

.welcomeTitle {
  color: #3bf2ff;
  font-size: 120px;
  font-weight: 700;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.editBtn {
  font-size: 120px;
  position: absolute;
  bottom: 0;
  right: -343px;
  opacity: 0;
}

.modal {
  width: 786px;
  height: 457px;
  transform: translate(223px, 330px);
  background-image: url(~@/assets/modal-bg.png);
  background-size: cover;
  padding: 33px 60px 35px;
  position: absolute;
  top: 0;
  left: 0;
}

.modalTitle {
  color: #3bf2ff;
  font-size: 32px;
  font-weight: 700;
}

.modalContent {
  margin: 95px 0 82px;
}

.modalContent input {
  width: 666px;
  height: 87px;
  font-size: 32px;
  color: #ffffff;
  padding: 20px 24px;
  background: rgba(50, 141, 186, 0.39);
  border: 1px solid rgba(59, 242, 255, 1) !important;
}

.modalContent input:focus {
  outline: 0;
}

.modalFooter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.modalBtn {
  background-image: url(~@/assets/modal-btn.png);
  background-size: cover;
  width: 168px;
  height: 78px;
  line-height: 78px;
  text-align: center;
  color: #00fff4;
  font-size: 24px;
  font-weight: 700;
  margin-left: 24px;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #41a2bf;
  font-size: 32px;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #41a2bf;
  font-size: 32px;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #41a2bf;
  font-size: 32px;
}
:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #41a2bf;
  font-size: 32px;
}
